<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/popover-utils.js"></script>

<script>
  function findPopovers(root) {
    let popovers = [];
    if (!root)
      return popovers;
    if (root instanceof Element && root.matches('[popover]'))
      popovers.push(root);
    popovers.push(...findPopovers(root.shadowRoot));
    root.childNodes.forEach(child => {
      popovers.push(...findPopovers(child));
    })
    return popovers;
  }
  function getPopoverReferences(testId) {
    const testRoot = document.querySelector(`#${testId}`);
    assert_true(!!testRoot);
    return findPopovers(testRoot);
  }
</script>

<div id=test1>
  <button>Test1 Popover</button>
  <my-element>
    <template shadowrootmode=open>
      <div popover>
        <p>This should show, even though it is inside shadow DOM.</p>
      </div>
    </template>
  </my-element>
</div>

<script>
  test(function() {
    const popover = getPopoverReferences('test1')[0];
    popover.showPopover();
    assert_true(popover.matches(':popover-open'));
    assert_true(isElementVisible(popover));
    popover.hidePopover(); // Cleanup
  }, "Popovers located inside shadow DOM can still be shown");
</script>


<div id=test4>
  <button>Test 4 Popover 1</button>
  <div popover>
    <p>This should not get hidden when popover2 opens.</p>
    <my-element>
      <template shadowrootmode=open>
        <button id=t4b2>Test 4 Popover 2</button>
        <div popover>
          <p>This should not hide popover1.</p>
        </div>
      </template>
    </my-element>
  </div>
</div>

<script>
  promise_test(async function() {
    const [popover1,popover2] = getPopoverReferences('test4');
    popover1.showPopover();
    popover2.showPopover();
    // Both 1 and 2 should be open at this point.
    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
    assert_true(isElementVisible(popover1));
    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
    assert_true(isElementVisible(popover2));
    // This should hide both of them.
    popover1.hidePopover();
    await waitForRender();
    assert_false(popover1.matches(':popover-open'));
    assert_false(isElementVisible(popover1));
    assert_false(popover2.matches(':popover-open'));
    assert_false(isElementVisible(popover2));
  }, "The popover stack is preserved across shadow-inclusive ancestors");
</script>


<div id=test5>
  <template shadowrootmode=open>
    <button popovertarget=p1>Test 5 Popover 1</button>
    <div popover id=p1>Popover 1
      <p>This should not get hidden when popover2 opens.</p>
      <button popovertarget=p2>Click</button>
    </div>
    <div popover id=p2>Popover 2
      <p>This should not hide popover1.</p>
    </div>
  </template>
</div>
<script>
  promise_test(async function() {
    const [popover1,popover2] = getPopoverReferences('test5');
    popover1.showPopover();
    popover1.querySelector('button').click(); // Use invoker to keep 2 visible
    // Both 1 and 2 should be open at this point.
    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
    assert_true(isElementVisible(popover1));
    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
    assert_true(isElementVisible(popover2));
    // This should hide both of them.
    popover1.hidePopover();
    await waitForRender();
    assert_false(popover1.matches(':popover-open'));
    assert_false(isElementVisible(popover1));
    assert_false(popover2.matches(':popover-open'));
    assert_false(isElementVisible(popover2));
  }, "Popover ancestor relationships are within a root, not within the document");
</script>
